<template>
  <div class="index-head">
    <div class="head-nav">
      <div class="hn-box">
        <img src="../assets/4-min.png" alt="" srcset="" />
        <div class="gen">
          <img
            src="../assets/更多.png"
            alt=""
            srcset=""
            @click="showChoice = !showChoice"
          />
        </div>
        <div class="uls">
          <ul class="top-nav">
            <li>
              <router-link exact to="/" class="router-link-active"
                >首页</router-link
              >
            </li>
            <li>
              <router-link to="/brief" class="router-link-active"
                >院部简介</router-link
              >
            </li>
            <li v-for="item in navlist" :key="item.id">
              <router-link to="/" class="router-link-active">
                {{ item.title }}
                <div class="lichild" v-for="item1 in item.child" :key="item1">
                  <router-link to="/about" class="router-link-active">
                    <div class="lichild1">{{ item1.title }}</div>
                  </router-link>
                </div>
              </router-link>
            </li>
            <!-- <li>
                        <router-link to="/home">专业介绍</router-link>
                    </li> -->
            <li>
              <router-link to="/" class="router-link-active"
                >领导关怀</router-link
              >
            </li>
            <li>
              <router-link to="/" class="router-link-active"
                >对外交流</router-link
              >
            </li>
            <li>
              <router-link to="/" class="router-link-active"
                >社会服务</router-link
              >
            </li>
            <li>
              <router-link to="/" class="router-link-active"
                >师资力量</router-link
              >
            </li>
            <li>
              <router-link to="/" class="router-link-active"
                >实训中心</router-link
              >
            </li>
            <li>
              <router-link to="/" class="router-link-active"
                >实习基地</router-link
              >
            </li>
          </ul>
          <ul class="top-nav1" v-show="showChoice">
            <li
              v-for="(item, index) in nav"
              :key="index"
              @click="showChoice = !showChoice"
            >
              <router-link :to="item.rout" class="router-link-active">{{
                item.text
              }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="head-img">
      <t-swiper
        class="tdesign-demo-block--swiper"
        :duration="300"
        :interval="2000"
      >
        <t-swiper-item
          v-for="item in bannerList"
          :key="item.id"
          class="t-swiper-item"
        >
          <div class="demo-item">
            <img :src="item.image" alt="" />
          </div>
        </t-swiper-item>
        <t-swiper-item>
          <div class="demo-item">
            <img src="/src/assets/微信图片_20240523093607.jpg" alt="" />
          </div>
        </t-swiper-item>
      </t-swiper>
    </div>
  </div>
</template>
<script setup>
import { RouterLink } from "vue-router";
import { ref, reactive } from "vue";
import { getBrList, getnavList } from "@/api/index.js";
const showChoice = ref(false);
const nav = reactive([
  { text: "首页", rout: "/" },
  { text: "院部简介", rout: "/brief" },
  { text: "办学特色", rout: "/" },
  { text: "专业介绍", rout: "/" },
  { text: "领导关怀", rout: "/" },
  { text: "对外交流", rout: "/" },
  { text: "社会服务", rout: "/" },
  { text: "师资力量", rout: "/" },
  { text: "实训中心", rout: "/" },
  { text: "实习基地", rout: "/" },
]);
// 轮播图
const bannerList = ref();
const getbannerList = async () => {
  const {
    data: { data },
  } = await getBrList();
  console.log(data);
  bannerList.value = data;
  console.log(bannerList);
};
// 导航
const navlist = ref();
const getnaavList = async () => {
  const {
    data: { data },
  } = await getnavList();
  navlist.value = data;
  console.log(data);
};
getnaavList();
getbannerList();
</script>
<style lang="scss">
.index-head {
  width: 100%;

  .head-nav {
    width: 100%;
    margin: auto;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    position: absolute;
    z-index: 999;
    .hn-box {
      width: 85%;
      margin: auto;
      line-height: 30px;
      display: flex;
      @media (max-width: 1024px) {
        height: 44px;
      }
      img {
        width: 15%;
        height: 64px;
        @media (max-width: 1024px) {
          width: 35%;
          height: 44px;
        }
      }
      .gen {
        display: none;
        height: 30px;
        @media (max-width: 1024px) {
          width: 8%;
          height: 30px;
          display: block;
          position: absolute;
          top: 5px;
          right: 10px;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .uls {
        width: 85%;
        @media (max-width: 1024px) {
          width: 95%;
          margin: auto;
          position: absolute;
          left: 10px;
          top: 25px;
        }
        .top-nav {
          width: 100%;
          display: flex;
          list-style-type: none;
          margin-top: 10px;
          @media (max-width: 1024px) {
            width: 100%;
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
          }

          li {
            text-align: center;
            width: 10%;
            height: 44px;
            line-height: 44px;
            @media (max-width: 1024px) {
              width: 100%;
              text-align: center;
              border-bottom: 1px solid white;
              position: relative;
              left: -20px;
            }
            .router-link-active {
              color: white;
              text-decoration-line: none;
            }
            .lichild {
              display: none;
              z-index: 999;
              width: 140px;
              background-color: rgba(0, 0, 0, 0.6);
              a {
                width: 100%;
              }
            }
            &:hover .lichild {
              display: block;
              margin-left: -10%;
            }
          }
          li:hover .router-link-active {
            border-bottom: 3px solid blue;
          }
        }
        .top-nav1 {
          display: flex;
          width: 100%;
          @media (max-width: 1024px) {
            display: block;
            height: 440px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0px;
            z-index: 999;
          }

          li {
            list-style: none;
            flex: 1;
            text-align: center;
            padding-top: 10px;

            @media (max-width: 1024px) {
              // display: none;
              line-height: 40px;
              height: 40px;
              width: 100%;
              font-size: 12px;
              text-align: left;
            }

            a {
              text-decoration: none;
              display: block;
              padding-bottom: 8px;
              color: #fff;
              width: 80px;
              height: 60px;
              margin: auto;
              line-height: 60px;

              @media (max-width: 1024px) {
                width: 90%;
                margin: auto;
              }

              &:hover {
                border-bottom: 4px solid #005bac;
              }
            }
          }
        }
      }
    }
  }
}
.head-img {
  width: 100%;
  .demo-item {
    width: 100%;
    height: 500px;
    @media (max-width: 1024px) {
      height: 200px;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
